import Taro from "@tarojs/taro";
import { View,Input,Image } from "@tarojs/components";
import { useState } from "react";
import './index.scss'
import defaultPhoto from '../../images/add.png'

export default function SkillCertificatePost(props){
const {Info,changeNewSkillItem}=props
// const openid=Taro.getStorageSync(`openid`)
const [base64Photo,setBase64Photo]=useState()//荣誉证书
const [name,setName]=useState()//荣誉证书名称


//照片base64转换并保存64编码
const  base64Change = (fileSrc)=>{//第二个参数为保存数据
  return new Promise((resolve,reject)=>{
      if(Taro.getEnv()==='WEAPP'){
          console.log('微信小程序');
          Taro.getFileSystemManager().readFile({
              filePath: fileSrc, //选择图片返回的相对路径
              encoding: 'base64', //编码格式
              success: res => { //成功的回调
                  let base64 =  res.data;
                  console.log(base64);
                  setBase64Photo(base64);
                  handleSkillChange('photo')(base64)//传递参数
              }
          });
      }
  });
};

//新增技能证书上传
const skillphotoPost=()=>{
  Taro.chooseImage({
    count: 1,// 默认9
    sizeType: ['original', 'compressed'],// 能够指定是原图仍是压缩图，默认两者都有
    sourceType: ['album', 'camera'],// 能够指定来源是相册仍是相机，默认两者都有
    success: function(res) {
        // console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath能够做为img标签的src属性显示图片
        let tempFilePaths = res.tempFilePaths;
        let changeFile = {};
        changeFile = tempFilePaths[0];
        // console.log(changeFile);
        base64Change(changeFile)
        }
  })

}

const handleSkillChange=(key)=>(value)=>{
  changeNewSkillItem(({//修改子类展示数据
    ...Info,
    [key]:value
    }
    ))
}


  return(
    <View >
    <View className='at-row'>

    <View className='at-col at-col-5'>
        <Input 
          placeholder='技能证书名称'
          className='at-col at-col-9' 
          name='name'
          type='text'
          value={name}
          onBlur={(e)=>{setName(e.detail.value);handleSkillChange('name')(e.detail.value)}}
        />
      </View>

      <Image className='at-col at-col-7 myResumePhoto' src={base64Photo?'data:image/png;base64,'+base64Photo:defaultPhoto} onClick={skillphotoPost} /> 
            
        
   </View>
    </View>
  )
}